<template>
  <view class="reply-wrap" :data-theme="globPrimary">
    <u-navbar title="评论" :custom-back="back"></u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="downCallback"
      @up="getReply"
    >
      <template v-if="!$u.test.empty(comment)">
        <view class="comment-item u-border-bottom">
          <u-avatar
            :size="64"
            :src="comment.user.avatar_url"
            @click="onUser(comment.user.id)"
          ></u-avatar>
          <view class="desc">
            <view class="u-flex">
              <view class="name">
                {{ comment.user.nick_name }}
              </view>
              <u-rate
                v-model="comment.star"
                disabled
                inactive-color="#DCDFE6"
                active-color="#FF8A52"
                inactive-icon="star-fill"
                size="28"
              ></u-rate>
            </view>
            <view class="content">{{ comment.content }}</view>
            <view class="u-flex">
              <view class="time">
                {{ comment.create_time | timeFrom('yyyy-mm-dd') }}
              </view>
              <view
                v-if="comment.user_id == glob_user_id"
                class="del"
                @click="handleDeleteComment(comment.id)"
                >删除</view
              >
              <view class="like u-flex" @click="getLike(comment.id, comment.like)">
                <u-icon
                  :name="comment.like ? 'thumb-up-fill' : 'thumb-up'"
                  :size="40"
                  :color="comment.like ? '#FF8A52' : '#909399'"
                ></u-icon>
                <view class="num" :class="{ active: comment.like }">
                  {{ comment.like_count }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="reply-head"> 共{{ comment.reply_count }}条回复 </view>
      </template>
      <view class="reply-list">
        <view class="comment-item" v-for="(item, index) in commentList" :key="index">
          <u-avatar
            :size="64"
            :src="item.user.avatar_url"
            @longpress="replyUser(item)"
            @click="onUser(item.user.id)"
          ></u-avatar>
          <view class="desc u-border-bottom">
            <view class="u-flex">
              <view class="name">
                {{ item.user.nick_name }}
              </view>
            </view>
            <view class="content">
              <block v-if="item.reply_user_id != 0">
                回复
                <text class="reply-name">@{{ item.reply_user }}</text
                >：
              </block>
              {{ item.content }}
            </view>
            <view class="u-flex">
              <view class="time">
                {{ item.create_time | timeFrom('yyyy-mm-dd') }}
              </view>
              <view
                v-if="item.user_id == glob_user_id"
                class="del"
                @click="handleDeleteReply(item.id)"
                >删除</view
              >
              <view class="like u-flex" @click="getLike(item.id, item.like)">
                <u-icon
                  :name="item.like ? 'thumb-up-fill' : 'thumb-up'"
                  :size="40"
                  :color="item.like ? '#FF8A52' : '#909399'"
                ></u-icon>
                <view class="num" :class="{ active: item.like }">
                  {{ item.like_count }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <view class="release-placeholder">
      <view class="release-wrap" :style="{ 'padding-bottom': keyboardheight + 10 + 'px' }">
        <view class="input-wrap">
          <textarea
            class="textarea"
            :value="content"
            placeholder-class="placeholder edu-icon edu-icon-home_edit_icon"
            :placeholder="placeholder"
            :show-confirm-bar="false"
            :adjust-position="false"
            :maxlength="200"
            :auto-height="true"
            @focus="questionFocus"
            @blur="questionBlur"
            @input="questionInput"
          />
        </view>
        <edu-button
          type="primary"
          size="medium"
          shape="circle"
          :disabled="contentDisabled"
          @click="onReply"
          >发布</edu-button
        >
      </view>
    </view>
    <edu-user-coupon></edu-user-coupon>

    <u-modal
      show-cancel-button
      v-model="deleteVisible"
      :show-title="false"
      cancel-text="取消"
      confirm-text="删除"
      :content="deleteContent"
      :confirm-style="{ 'border-left': '1px solid #e4e7ed' }"
      cancel-color="#606266"
      :confirm-color="globPrimaryColor"
      @confirm="handleDeleteConfirm"
    >
    </u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      commentList: [],
      comment: {},
      content: '',
      replyId: 0,
      placeholder: '说点什么…',
      deleteVisible: false,
      deleteType: 0,
      deleteContent: '',
      deleteCurrentId: 0,
      keyboardheight: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globWindowHeight: 'projectSetting/globWindowHeight',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
      userInfo: 'user/getUserInfo',
    }),
    mescrollHeight() {
      let height =
        this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight - uni.upx2px(120)
      return `${height}px`
    },
    // 当前用户是自己id
    glob_user_id() {
      if (this.$u.test.empty(this.userInfo)) return 0
      return this.userInfo.id
    },
    contentDisabled() {
      return this.$u.trim(this.content).length == 0
    },
  },
  onLoad(options) {
    this.commentId = options.id
  },
  methods: {
    // 回复列表
    getReply(page) {
      let params = {
        page: page.num,
        count: page.size,
      }
      this.$edu.api.getCourseCommentReply(this.commentId, params).then((res) => {
        const { data } = res
        this.comment = data.comment

        let list = data.commentReply.data
        if (page.num == 1) this.commentList = []
        this.commentList = this.commentList.concat(list)
        this.mescroll.endSuccess(list.length)
      })
    },
    // 点赞
    getLike(id, like) {
      this.$u.debounce(() => {
        if (this.commentId == id) {
          this.$edu.api
            .getCourseCommentLike(id, {
              status: like ? 0 : 1,
            })
            .then((res) => {
              if (like) {
                this.comment.like = 0
                this.comment.like_count--
              } else {
                this.comment.like = 1
                this.comment.like_count++
              }
            })
        } else {
          this.$edu.api
            .getCourseCommentReplyLike(id, {
              status: like ? 0 : 1,
            })
            .then((res) => {
              let item = this.commentList.find((item) => item.id == id)
              if (like) {
                item.like = 0
                item.like_count--
              } else {
                item.like = 1
                item.like_count++
              }
            })
        }
      })
    },
    // 点评
    onReply() {
      if (this.$u.trim(this.content).length == 0) {
        this.$u.toast('评论不能为空')
      } else {
        this.$edu.api
          .createCourseCommentReply(this.commentId, {
            reply_user_id: this.replyId,
            content: this.$u.trim(this.content),
          })
          .then((res) => {
            this.$u.toast(res.msg)
            this.replyDefault()
            this.mescroll.resetUpScroll(false)
            this.mescroll.scrollTo(0, 0)
          })
      }
    },
    // 长按@用户id
    replyUser(item) {
      this.content = ''
      this.replyId = item.user_id
      this.placeholder = `@${item.user.nick_name}`
    },
    // 输入框恢复默认值
    replyDefault() {
      this.replyId = 0
      this.content = ''
      this.placeholder = '发表你的评论吧～'
    },
    // 个人主页
    onUser(id) {
      this.$edu.judgeLogin(() => {
        this.$edu.route('/pageFound/user/index', {
          id: id,
        })
      })
    },
    // 删除评论
    handleDeleteComment(id) {
      this.deleteContent = '确认删除该条评论?'
      this.deleteType = 1
      this.deleteCurrentId = id
      this.deleteVisible = true
    },
    // 删除回复
    handleDeleteReply(id) {
      this.deleteContent = '确认删除该条回复?'
      this.deleteType = 2
      this.deleteCurrentId = id
      this.deleteVisible = true
    },
    // 确认删除
    handleDeleteConfirm() {
      if (this.deleteType == 1) {
        this.$edu.api
          .deleteCourseComment(this.deleteCurrentId)
          .then((res) => {
            this.$u.toast(res.msg)
            setTimeout(() => {
              this.$u.route({ type: 'back' })
              uni.$emit('courseTabUpdate')
            }, 250)
          })
          .catch((err) => {
            this.$u.toast(err.msg)
          })
      } else if (this.deleteType == 2) {
        this.$edu.api
          .deleteCourseCommentReply(this.deleteCurrentId)
          .then((res) => {
            this.$u.toast(res.msg)
            setTimeout(() => {
              this.mescroll.resetUpScroll(false)
            }, 250)
          })
          .catch((err) => {
            this.$u.toast(err.msg)
          })
      }
    },
    back() {
      uni.navigateBack({})
      uni.$emit('courseTabUpdate')
    },
    questionFocus(e) {
      this.keyboardheight = e.detail.height
    },
    questionBlur() {
      this.keyboardheight = 0
    },
    questionInput(e) {
      this.content = e.detail.value
    },
  },
}
</script>

<style lang="scss" scoped>
.reply-wrap {
  background-color: #fff;
  ::v-deep.reply-head {
    margin-top: 40rpx;
    margin-bottom: 10rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #303133;
    line-height: 45rpx;
  }
}

.comment-item {
  display: flex;
  padding-top: 30rpx;
  padding-left: 30rpx;
  .desc {
    flex: 1;
    margin-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 30rpx;
  }
  .name {
    color: #606266;
    font-size: 28rpx;
  }
  .content {
    margin: 25rpx 0 20rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #303133;
    line-height: 46rpx;
    .reply-name {
      @include text-color();
    }
  }
  .time {
    font-size: 24rpx;
    font-weight: 400;
    color: #909399;
  }

  .del {
    font-size: 24rpx;
    font-weight: 400;
    color: #606266;
    margin-left: 24rpx;
  }
  .like {
    margin-left: auto;
  }
  .num {
    margin-left: 4rpx;
    font-size: 24rpx;
    color: #909399;
    &.active {
      color: #ff8a52;
    }
  }
}

.release-placeholder {
  height: 120rpx;
}

.release-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 20rpx 30rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 14rpx 0px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  .input-wrap {
    flex: 1;
    background: #f7f7f7;
    border-radius: 38rpx;
    padding: 0 25rpx;
    margin-right: 20rpx;

    .textarea {
      width: 100%;
      padding: 18rpx 0;
      height: 38rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #303133;
    }

    ::v-deep .placeholder {
      font-size: 26rpx;
      font-weight: 400;
      color: #b7bac1;
      display: flex;
      align-items: center;
      &:before {
        margin-right: 16rpx;
        font-size: 24rpx;
      }
    }
  }

  ::v-deep .edu-btn {
    width: 120rpx;
    padding: 0;
  }
}
</style>
